<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('基础示例')}`">{{ $t('基础示例') }}</t>
            <li>当前已选择：{{ value || '--' }}</li>
        </template>
        <sib-dropdown v-model="value" :options="dropdownData"></sib-dropdown>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const value = ref(2);
        return {
            value,
            dropdownData: [
                {
                    label: '小蛋挞',
                    value: 1,
                },
                {
                    label: '黄金狮子头',
                    value: 2,
                },
                {
                    label: '螺蛳粉',
                    value: 3,
                },
                {
                    label: '黄金糕',
                    value: 4,
                },
                {
                    label: '双皮奶',
                    value: 5,
                    // 禁用选项
                    disabled: true,
                    // 选项上方显示分割线
                    divided: true,
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <p>当前已选择：{{ value || '--' }}</p>
        <sib-dropdown v-model="value" :options="dropdownData"></sib-dropdown>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const value = ref(2);
        return {
            value,
            dropdownData: [
                {
                    label: '小蛋挞',
                    value: 1,
                },
                {
                    label: '黄金狮子头',
                    value: 2,
                },
                {
                    label: '螺蛳粉',
                    value: 3,
                },
                {
                    label: '黄金糕',
                    value: 4,
                },
                {
                    label: '双皮奶',
                    value: 5,
                    // 禁用选项
                    disabled: true,
                    // 选项上方显示分割线
                    divided: true,
                },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
